<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注意使用app.js里的服务器ip地址+后缀 才可访问</title>
    <!-- <script src="./jquery.js"></script> -->
    <!-- 在线jq -->
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>
    <!-- 登录表单 -->
    <form id="form1">
        <div>账号：<input type="text" name="username" /></div>
        <div>密码：<input type="password" name="password" /></div>
        <button>登录</button>
    </form>
    <script>
        $(function () {
            // 箭头函数没有自己的this 切记啊 我一开始是用的箭头函数 下面又用this表示表单 导至获取不到表单数据 
            // 找了半天错 操
            $('#form1').on('submit', function(e)  {
                e.preventDefault()
                $.post('/api/login', $(this).serialize(), (res) => {
                    if (res.status === 0) {
                        location.href = './index.html'
                    } else {
                        alert('登录失败')
                    }
                })
            })
        })



    // $(function () {
    //   // 监听表单的提交事件
    //   $('#form1').on('submit', function (e) {
    //     // 阻止默认提交行为
    //     e.preventDefault()
    //     // 发起 POST 登录请求
    //     $.post('/api/login', $(this).serialize(), function (res) {
    //       // status 为 0 表示登录成功；否则表示登录失败！
    //       if (res.status === 0) {
    //         location.href = './index.html'
    //       } else {
    //         alert('登录失败！')
    //       }
    //     })
    //   })
    // })
    </script>
</body>

</html>